import React from 'react';
import { observer } from 'mobx-react-lite';
import { useBeanManager } from '../hooks/useBeanManager';
import { TodoController } from '../controllers/TodoController';
import { TodoStore } from '../stores/TodoStore';
import {
  TodoContainer,
  TodoHeader,
  TodoInput,
  TodoList as StyledTodoList,
  TodoItem,
  TodoCheckbox,
  TodoTitle,
  TodoButton,
  FilterContainer,
  FilterButton
} from '../styles/todo.styles';

export const TodoList = observer(() => {
  const todoController = useBeanManager<TodoController>('todoController');
  const todoStore = useBeanManager<TodoStore>('todoStore');
  const [newTodo, setNewTodo] = React.useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (newTodo.trim()) {
      todoController.addTodo(newTodo);
      setNewTodo('');
    }
  };

  return (
    <TodoContainer>
      <TodoHeader>
        <h1>待办事项</h1>
      </TodoHeader>

      <form onSubmit={handleSubmit}>
        <TodoInput
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="添加新的待办事项..."
        />
      </form>

      <FilterContainer>
        {(['all', 'active', 'completed'] as const).map(filter => (
          <FilterButton
            key={filter}
            active={todoStore.state.filter === filter}
            onClick={() => todoController.setFilter(filter)}
          >
            {filter === 'all' ? '全部' : filter === 'active' ? '进行中' : '已完成'}
          </FilterButton>
        ))}
      </FilterContainer>

      <StyledTodoList>
        {todoStore.filteredTodos.map(todo => (
          <TodoItem key={todo.id}>
            <TodoCheckbox
              type="checkbox"
              checked={todo.completed}
              onChange={() => todoController.toggleTodo(todo.id)}
            />
            <TodoTitle completed={todo.completed}>
              {todo.title}
            </TodoTitle>
            <TodoButton onClick={() => todoController.removeTodo(todo.id)}>
              删除
            </TodoButton>
          </TodoItem>
        ))}
      </StyledTodoList>
    </TodoContainer>
  );
}); 